<!-- 这是算法报警的页面 -->
<template>
	<div class="alarm-algorithm">
		<div class="page-region">
			<div class="basic-region">
				<div class="basic-region-left">
					<div class="left-action-box">
						<div class="device-part">
							<a-select
								ref="select"
								v-model:value.trim="mAlgorithmIdList"
								style="margin-right: 12px"
								:options="AIServiceList"
								class="select-item"
								:class="[mAlgorithmIdList.length && 'active']"
								mode="multiple"
								placeholder="AI服务"
								max-tag-count="responsive"
								@change="handleSearch('mAlgorithmIdList')"
							></a-select>

							<a-tree-select
								v-model:value="cameraTreeList"
								style="margin-right: 12px"
								:tree-data="cameraTreeData"
								:dropdown-match-select-width="dropdownMatchSelectWidth"
								class="select-item"
								:class="[cameraTreeList.length && 'active']"
								max-tag-count="responsive"
								allow-clear
								tree-checkable
								:field-names="{
									children: 'children',
									label: 'name',
									value: 'id'
								}"
								tree-node-filter-prop="name"
								:show-checked-strategy="SHOW_PARENT"
								placeholder="场景区域/摄像头"
								@change="changeCameraTreeList"
							></a-tree-select>

							<a-cascader
								v-model:value="boxSerialList"
								class="select-item"
								:loading="cameraListLoading"
								:class="[boxSerialList.length && 'active']"
								max-tag-count="responsive"
								multiple
								:options="boxDeviceList"
								:field-names="{
									label: 'label',
									value: 'id',
									children: 'children'
								}"
								expand-trigger="hover"
								placeholder="盒子/摄像头"
								allow-clear
								show-arrow
								@change="changeBoxSerialList"
							>
								<template #label="data">
									{{ data }}
								</template>
							</a-cascader>
						</div>

						<div class="time-part">
							<ul class="select-list">
								<li
									:key="item.value"
									v-for="(item, index) in presetTime"
									class="select-list-item"
									:class="[activeTimeIndex === index && 'active']"
									@click="changeTime(index, item.value)"
								>
									{{ item.text }}
								</li>
							</ul>
							<a-range-picker
								format="YYYY-MM-DD HH:mm"
								class="range-picker"
								value-format="YYYY-MM-DD HH:mm"
								:value="[createBeginVal, createEndVal]"
								show-time
								:class="[createBeginVal && createBeginVal && 'active']"
								:placeholder="['开始时间', '结束时间']"
								input-read-only
								@calendar-change="changeRangePicker"
							>
								<template #suffixIcon> <clock-circle-outlined></clock-circle-outlined></template
							></a-range-picker>
						</div>
					</div>
				</div>
				<div class="basic-region-right">
					<div class="reset" @click="reset">
						<div>
							重置
							<global-svg-icon icon-name="reset" style="margin-right: 10px" width="14px" height="14px"></global-svg-icon>
						</div>
					</div>
				</div>
			</div>

			<div class="checkbox-card">
				<div v-if="tableAttr.data?.length === 0" style="padding: 291px 800px">
					<global-svg-icon icon-name="empty" width="200px" height="72px" style="color: #4e596a"></global-svg-icon>
				</div>
				<!-- <a-empty v-if="tableAttr.data?.length === 0" class="empty" :image="Empty.PRESENTED_IMAGE_SIMPLE"></a-empty> -->
				<vue-scroll @handle-scroll="handlePageScroll">
					<a-checkbox-group v-model:value="checkedList" class="card-wrap" @change="onCheckboxGroupChange">
						<!-- <a-spin size="large" :spinning="true" class="loading"> -->
						<a-spin size="large" :spinning="tableAttr.loading" class="loading">
							<div class="card-list" :style="{ paddingBottom: isOpenSelect ? '190px' : '140px' }" tabindex="0" @blur="cardBlur">
								<!-- v-for="(item, index) in tableAttr.data" -->
								<label
									:id="`card-list-item-${item.id}`"
									:key="item.id"
									v-for="(item, index) in tableAttr.data"
									:for="isOpenSelect ? item.id : ''"
									class="card-list-item"
									:class="[isOpenSelect && 'checked', nowSelectId === item.id && 'select', { lastLine: (index + 1) % 8 == 0 }]"
									@click="handleClickItem(item, index)"
								>
									<div class="img-wrap">
										<!-- :data-src="getRealImgUrl(item.eventImg)" -->
										<img
											class="lazyload"
											:src="item.imageUrl"
											:onerror="
												(e: any) => {
													e.target.src = defaultImage;
													e.target.onerror = null;
												}
											"
										/>
									</div>

									<div class="info-box">
										<div class="info-item flex-between">
											<div class="left" :title="item.positionName + '-' + item.deviceName">
												<span class="info-area">{{ item.positionName }}-</span>
												<span class="info-device">{{ item.deviceName }}</span>
											</div>
											<div class="info-time">{{ item.createTime }}</div>
										</div>
										<div class="ai-item flex-between">
											<div class="flex">
												<div class="ai-alarm-name">
													{{ item.algorithmName }}
												</div>
												<div class="risk-level" :style="c_Fengxian(item).style">{{ c_Fengxian(item).text }}</div>
											</div>

											<global-picture-set :list="item.personInfoList"></global-picture-set>
										</div>
									</div>
									<div v-show="isOpenSelect" class="right-top" @click.stop>
										<a-checkbox :id="'' + item.id" :value="item.id"></a-checkbox>
									</div>
								</label>
							</div>
						</a-spin>
					</a-checkbox-group>
				</vue-scroll>
				<div class="suspend">
					<div v-if="isOpenSelect" class="suspend-operate">
						<div class="suspend-operate-select">
							<a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">全选本页</a-checkbox>
							<span></span>
							<p
								:style="{
									color: checkedList.length > 0 ? 'rgba(240, 246, 252, 1)' : 'rgba(48, 93, 194, 1)'
								}"
							>
								已选中{{ checkedList.length }}条
							</p>
						</div>
						<span class="export-line"></span>
						<div class="suspend-operate-btns">
							<a-button
								v-if="g6Permission.showBtn('export')"
								type="default"
								class="icon-button"
								:disabled="checkedList.length === 0 || exportDisabled"
								@click="handleExport(1)"
							>
								<global-svg-icon
									icon-name="image-edit-line"
									:color="checkedList.length !== 0 ? '#fff' : 'rgba(78, 89, 106, 1)'"
									width="16px"
									height="16px"
									style="margin-right: 4px"
								></global-svg-icon>
								导出罚单
							</a-button>
							<a-button
								v-if="g6Permission.showBtn('export')"
								type="default"
								class="icon-button"
								:disabled="checkedList.length === 0 || exportDisabled"
								@click="handleExport(0)"
							>
								<global-svg-icon
									icon-name="image-line"
									:color="checkedList.length !== 0 ? '#fff' : 'rgba(78, 89, 106, 1)'"
									width="16px"
									height="16px"
									style="margin-right: 4px"
								></global-svg-icon>
								导出原图
							</a-button>
						</div>
					</div>
					<div class="suspend-pagination">
						<a-button type="default" class="icon-button" :class="[!isOpenSelect && 'icon-select-button']" @click="handleOpenSelect">
							<global-svg-icon
								v-if="isOpenSelect"
								icon-name="arrow-down-s-line"
								width="16px"
								height="16px"
								style="margin-right: 6px"
							></global-svg-icon>
							<global-svg-icon v-else icon-name="icon-wrapper" width="16px" height="16px" style="margin-right: 6px"></global-svg-icon>

							选择
						</a-button>
						<div class="pagination">
							<global-pagination
								:current="tableAttr.current"
								:page-size="tableAttr.pageSize"
								:total="tableAttr.total"
								:page-size-options="['50', '100', '200']"
								@change="onPaginationChange"
							></global-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
		<alarm-algorithm-person-modal
			ref="alarmModalRef"
			:page-current="tableAttr.current"
			:page-size="tableAttr.pageSize"
			:page-from="0"
			:show-change-original-img="true"
			@close="alarmModalClose"
			@toggle="modalImgToggle"
		></alarm-algorithm-person-modal>
	</div>
</template>

<script setup lang="ts" name="algorithm-hardware-alarms-table">
import AlarmAlgorithmPersonModal from './AlarmAlgorithmPersonModal.vue';

defineOptions({ name: 'AlarmAlgorithm' });

import { TreeSelect, Empty } from 'ant-design-vue';
import { g6UseTable } from 'glasssix-vue3-hooks';
import { g6Permission } from 'glasssix-utils-ts';
import { getRealImgUrl, arr2Str } from '@/global-utils/base.utils';

import defaultImage from '@/global-assets/imgs/img-none.png';
import { AlarmCenterAPI } from '../../../api';
import { TsSelectOptItem, CarouselDataProps } from '../../../type';
const $message: any = inject('$message');

import dayjs from 'dayjs';

const c_Fengxian = computed(() => {
	return (item: any) => {
		if (item.securityLevel === 0) {
			return {
				style: { border: '1px solid  #3D7FE9', background: 'rgba(61, 127, 233, 0.10)', color: '#3D7FE9' },
				text: '低风险'
			};
		}
		if (item.securityLevel === 1) {
			return {
				style: { border: '1px solid  #F59700', background: 'rgba(245, 151, 0, 0.10)', color: '#F59700' },
				text: '中风险'
			};
		}
		return {
			style: { border: '1px solid  #BA3B29', background: 'rgba(186, 59, 41, 0.10)', color: '#BA3B29' },
			text: '高风险'
		};
	};
});

// 计算每张图片的样式
const hoveredIndex = ref<number | null>(null);
const getImageStyle = (itemIndex: number, imgIndex: number) => {
	if (showPersonIndex.value !== itemIndex) {
		return {
			zIndex: imgIndex,
			marginRight: imgIndex === 8 ? '0' : '-8px'
		};
	}
	return {
		zIndex: hoveredIndex.value === imgIndex ? 1999 : imgIndex,
		marginRight: imgIndex === 8 ? '0' : '-8px',
		border: hoveredIndex.value === imgIndex ? '1px solid #305dc2' : '1px solid #0a1225',
		transition: 'margin-right 0.1s ease, z-index 0.1s ease, border 0.1s ease'
	};
};

// 悬停处理函数
const handleMouseOver = (index: number) => {
	console.log('------------', index);

	hoveredIndex.value = index;
};

// 移出悬停处理函数
const handleMouseOut = () => {
	hoveredIndex.value = null;
};

const showPersonIndex = ref<number | null>(null);
const showPerson = (index: number) => {
	console.log(index);
	showPersonIndex.value = index;
};
const hidePerson = (index: number) => {
	showPersonIndex.value = null;
};

const { tableAttr, setTableData, setTablePagination } = g6UseTable(AlarmCenterAPI.list, { pageSize: 50 });

const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const headerBottomBorderColor = ref('transparent');

const handlePageScroll = (vertical: Record<string, any>): void => {
	headerBottomBorderColor.value = vertical.scrollTop > 10 ? '#20305b' : 'transparent';
};

let indeterminate = ref<boolean>(true);

/**
 * -----------------------搜索-----------------------
 */
// AI服务下拉数据
const mAlgorithmIdList = ref<string[]>([]);
const AIServiceList = ref<TsSelectOptItem[]>([]);
const getAIServiceList = async (): Promise<void> => {
	let { data } = await AlarmCenterAPI.AIServiceList();
	AIServiceList.value = data;
};

// 场景区域/摄像头下拉数据
const dropdownMatchSelectWidth = ref<number>(500);
// 回显页面的
const cameraTreeList = ref([]);
// 传给后端区域id的
const mAreaIdList = ref<any>([]);
// 传给后端的设备id
const areDeviceIdList = ref<string[]>([]);
// 下拉数据
const cameraTreeData = ref<any>([]);
const getDeviceList = async (): Promise<void> => {
	let { data } = await AlarmCenterAPI.getDeviceList();
	console.log('摄像头下拉数据res:', data);
	cameraTreeData.value = filterTreeDelDisable(data);
	// cameraTreeData.value = data;
};
// 取消所有禁用
const filterTreeDelDisable = (tree: any) => {
	console.log('--------', tree);
	if (tree) {
		tree.forEach((item: any, index: any, arr: any) => {
			item.disabled = false;
			if (item.children) {
				arr[index].children = filterTreeDelDisable(item.children);
			}
		});
	}
	return tree;
};

// 盒子/摄像头下拉数据
// 回显页面的
const boxSerialList = ref<string[]>([]);
const cameraListLoading = ref<boolean>(false);
// 传给后端的盒子序列号
const boxSerialListVal = ref<string[] | number[]>([]);
// 传给后端的设备id
const boxDeviceIdList = ref<string[] | number[]>([]);
// 下拉数据
const boxDeviceList = ref<any>([]);
const getBoxDeviceList = async (): Promise<void> => {
	let { data } = await AlarmCenterAPI.boxDeviceList();
	// console.log('res:', data);
	boxDeviceList.value = data;
};

// 时间过滤
const createBeginVal = ref<any>();
const createEndVal = ref<any>();

// 预设时间段
const presetTime = ref<any>([
	{
		text: '今日',
		value: 1
	},
	{
		text: '近7天',
		value: 7
	},
	{
		text: '近30天',
		value: 30
	}
]);
const activeTimeIndex = ref<number>(0);

// 查询
const handleSearch = (key?: string): void => {
	switch (key) {
		case 'mAlgorithmIdList':
			tableAttr.searchObj.mAlgorithmIdList = arr2Str(mAlgorithmIdList.value);

			break;
		case 'mAreaOrDeviceIdList':
			tableAttr.searchObj.mAreaIdList = arr2Str(mAreaIdList.value);
			tableAttr.searchObj.areDeviceIdList = arr2Str(areDeviceIdList.value);

			break;
		case 'boxSerialListVal':
			tableAttr.searchObj.boxDeviceIdList = arr2Str(boxDeviceIdList.value as string[] | number[]);
			tableAttr.searchObj.boxSerialList = arr2Str(boxSerialListVal.value as string[] | number[]);

			break;

		default:
			break;
	}

	setTableData(true);
};

/* ------------------- 处理时间选择逻辑 ------------------ */

// 根据传入的天数，获取以当前时间基准的时间范围
const GetTimeRange = (day: number, init: boolean = true): void => {
	const createBegin = dayjs()
		.subtract(day - 1, 'days')
		.startOf('day')
		.format('YYYY-MM-DD HH:mm:ss');
	const createEnd = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');

	tableAttr.searchObj.startTime = createBegin;
	tableAttr.searchObj.endTime = createEnd;
	createBeginVal.value = undefined;
	createEndVal.value = undefined;
	tableAttr.current = 1;
	if (init) {
		handleSearch();
	}
};
const changeRangePicker = (dates: any, date: string[]): void => {
	console.log('---:', createBeginVal, createBeginVal);

	activeTimeIndex.value = -1;
	console.log('处理时间选择逻辑:', date);

	if (date && date.length) {
		if (date[0] !== '') {
			tableAttr.searchObj.startTime = `${date[0]}:00`;

			createBeginVal.value = `${date[0]}`;
		}
		if (date[1] !== '') {
			tableAttr.searchObj.endTime = `${date[1]}:59`;
			createEndVal.value = `${date[1]}`;
		}
		if (date[0] === '' && date[1] === '') {
			activeTimeIndex.value = 0;
			// GetTimeRange(7);
			GetTimeRange(1, false);

			// tableAttr.searchObj.startTime = undefined;
			// tableAttr.searchObj.endTime = undefined;
			createBeginVal.value = undefined;
			createEndVal.value = undefined;
		}

		tableAttr.current = 1;
		handleSearch();
	}
};
// 重置
const reset = (): void => {
	tableAttr.searchObj = {};
	mAlgorithmIdList.value = [];
	cameraTreeList.value = [];
	boxSerialList.value = [];
	activeTimeIndex.value = 0;
	tableAttr.searchObj.auditType = 1;

	GetTimeRange(1, false);

	setTableData(true);
};
const changeTime = (index: number, day: number): void => {
	// 如果是同一天不搜索
	if (index === activeTimeIndex.value) {
		return;
	}
	activeTimeIndex.value = index;

	GetTimeRange(day);
};
/* ------------------- 处理筛选区域的多选框逻辑 ------------------ */
// 递归筛选
const findObjectById = (data: any, id: string): any => {
	for (let i = 0; i < data.length; i++) {
		const obj = data[i];
		// console.log('递归：', obj.id, id);

		if (obj.id === id) {
			// console.log('递归：', obj);
			return obj;
		}
		if (obj.children && obj.children.length > 0) {
			const result = findObjectById(obj.children, id);
			if (result) {
				return result;
			}
		}
	}
	return null;
};

const flatten = (data: any): any => {
	return data.reduce((prev: any, cur: any) => {
		prev.push({
			areaOrDeviceId: cur.areaOrDeviceId,
			name: cur.name,
			type: cur.type
		});
		if (cur.children) {
			prev.push(...flatten(cur.children));
		}
		return prev;
	}, []);
};

// 场景区域/摄像头的值改变时
const changeCameraTreeList = (value: any): void => {
	mAreaIdList.value = [];
	areDeviceIdList.value = [];

	value.forEach((item: any) => {
		const re = findObjectById(cameraTreeData.value, item);

		// type为1时代表选择区域,则把区域id和摄像头id都传入
		if (re.type === 1) {
			console.log('re:', re);

			const flatData = flatten(re.children ? re.children : [re]);
			if (re.children) {
				// 区域和摄像头分开传
				flatData.forEach((i: any) => {
					if (i.type === 1) {
						mAreaIdList.value.push(i.areaOrDeviceId);
					} else {
						areDeviceIdList.value.push(i.areaOrDeviceId);
					}
				});
			}
			mAreaIdList.value.push(re.areaOrDeviceId);
		}
		// type为0时代表选择摄像头，只传摄像头id
		if (re.type === 0) {
			areDeviceIdList.value.push(re.areaOrDeviceId);
		}
	});
	console.log('最后', mAreaIdList.value, areDeviceIdList.value);

	handleSearch('mAreaOrDeviceIdList');
};

// 处理盒子/摄像头
const changeBoxSerialList = (value: any): void => {
	boxDeviceIdList.value = [];
	boxSerialListVal.value = [];

	value.forEach((item: any) => {
		const re = findObjectById(boxDeviceList.value, item[item.length - 1]);
		console.log('re', re);

		// 选中盒子时将所有子项的deviceId获取到
		if (re.children) {
			re.children.forEach((itemChild: any) => {
				boxDeviceIdList.value.push(itemChild.deviceId as never);
			});
			boxSerialListVal.value.push(re.boxSerial as never);
		} else {
			// 选中子项时直接把deviceId获取到
			boxDeviceIdList.value.push(re.deviceId as never);
		}
	});

	handleSearch('boxSerialListVal');
};

/* ------------------- 结束 ------------------ */

/**
 * 选中的列表
 */
// 列表数据
const checkedList = ref<any[]>([]);
const checkAll = ref<boolean>(false);
const isOpenSelect = ref<boolean>(false);
const nowSelectId = ref<number | null>();
const exportDisabled = ref<boolean>(false);
const alarmModalRef = ref();
// 失去焦点 清空选中
const cardBlur = () => {
	if (!alarmModalRef.value.getVisible()) {
		nowSelectId.value = null;
	}
};

// 分页处理
const onPaginationChange = (page: number, pageSize: number): void => {
	// 重置被选项
	checkAll.value = false;
	checkedList.value = [];
	document.querySelector('.card-wrap')?.scrollTo(0, 0);
	setTablePagination(page, pageSize);
};
// 全选、反选
const handleCheckAll = (e: any): void => {
	checkAll.value = e.target.checked;
	if (checkAll.value) {
		checkedList.value = tableAttr.data.map((item: any) => item.id);
	} else {
		checkedList.value = [];
	}
};
// 选择事件
const onCheckboxGroupChange = (checkedList: any[]): void => {
	isOpenSelect.value = true;
	checkAll.value = checkedList.length === tableAttr.data.length;
	// 未选中任何一个时不展示底部操作栏
	if (checkedList.length === 0) {
		isOpenSelect.value = false;
	}
};
const handleOpenSelect = (): void => {
	isOpenSelect.value = !isOpenSelect.value;
	checkedList.value = [];
	checkAll.value = false;
};
// 单击卡片打开弹窗
const handleClickItem = (_item: any, index: number): void => {
	if (isOpenSelect.value) {
		return;
	}
	const data = tableAttr.data.map((item: any) => {
		return {
			id: item.id,
			tag: item.content,
			time: item.createTime,
			image: item.imageUrl,
			securityLevel: item.securityLevel,
			title: item.positionName + '-' + item.deviceName,
			downLoadLink: item.eventType === 0 ? getRealImgUrl(item.eventImg) : getRealImgUrl(item.eventFile)
		};
	}) as CarouselDataProps[];

	alarmModalRef.value?.openModal(data, index);
};

// 图片切换
const modalImgToggle = async (id: number | null, index: number) => {
	nowSelectId.value = id;
	if (index + 1 > tableAttr.pageSize) {
		tableAttr.current++;
		await setTableData();
		handleClickItem(null, 0);
	}

	if (index + 1 <= 0) {
		tableAttr.current--;
		await setTableData();
		handleClickItem(null, tableAttr.pageSize - 1);
	}
};

const alarmModalClose = (id: number | string) => {
	const domId = `card-list-item-${id}`;
	const dom = document.getElementById(domId);
	dom?.focus();
	dom?.scrollIntoView({
		behavior: 'smooth',
		block: 'center',
		inline: 'center'
	});
};
const handleExport = async (imageType: number): Promise<void> => {
	exportDisabled.value = true;
	try {
		tableAttr.loading = true;
		const res = await AlarmCenterAPI.downloadAndExport({
			alarmIdList: checkedList.value.toString(),
			imageType
		});
		exportDisabled.value = false;
		tableAttr.loading = false;

		if (res.code !== 0) {
			return $message.error(res.message);
		}
		isOpenSelect.value = false;
		checkedList.value = [];
		checkAll.value = false;

		const href = window.URL.createObjectURL(new Blob([res.data?.data]));

		const a = document.createElement('a');
		a.href = href || '';

		const fileName = res.data?.title.split('filename=')[1];

		a.download = decodeURIComponent(fileName);
		a.click();
		a.remove();
	} catch (error) {
		exportDisabled.value = false;
		tableAttr.loading = false;
	}
};
const watchStop = watch(
	() => checkedList.value,
	() => {
		indeterminate.value = !!checkedList.value.length && checkedList.value.length < tableAttr.data.length;
		console.log('indeterminate:', indeterminate.value);
	}
);
const init = (): void => {
	getAIServiceList();
	getBoxDeviceList();
	getDeviceList();
	GetTimeRange(1, false);
	setTableData();
};

onMounted(() => {
	tableAttr.searchObj.auditType = 1;
	init();
});

onUnmounted(() => {
	watchStop();
});
</script>

<style lang="less" scoped>
.alarm-algorithm {
	height: 100%;

	.risk-level {
		display: flex;
		height: 20px;
		border-radius: 4px;
		padding: 4px 6px;
		align-items: center;
	}

	.page-region {
		width: 100%;
		height: 100%;
		padding: 28px 0 24px;

		.basic-region {
			display: flex;
			justify-content: space-between;
			height: 30px;

			.basic-region-left {
				display: grid;
				grid-auto-flow: column;
				grid-column-gap: 32px;
				align-items: center;

				.left-action-box {
					display: flex;

					.device-part {
						margin-right: 32px;

						.select-item {
							width: 180px;

							&.active {
								width: 285px;
							}
						}

						:deep(.ant-select) {
							.ant-select-selector {
								height: 36px !important;
							}
						}
					}

					.time-part {
						display: flex;

						.select-list {
							display: flex;
							// width: 280px;
							height: 36px;
							margin: 0 8px 0 0;
							border: 1px solid @mask02;
							border-radius: 6px;
							padding: 3px 0;
							font-size: 14px;
							line-height: 22px;
							color: @text02;
							flex-shrink: 0;

							.select-list-item {
								position: relative;
								width: 87px;
								margin: 0 3px;
								border-radius: 4px;
								padding: 3px 0;
								text-align: center;
								// line-height: 36px;
								cursor: pointer;

								&.active {
									color: @text01;
									background: @primary01;

									&:hover {
										background: @primary02 !important;
									}

									&:active {
										background: @primary03 !important;
									}
								}
								// 分割线
								&::after {
									position: absolute;
									top: 50%;
									right: -6px;
									width: 1px;
									height: 14px;
									margin-right: 3px;
									background: @borderColor02;
									transform: translateY(-50%);
									content: '';
								}

								&:last-child {
									&::after {
										display: none;
									}
								}
							}
						}

						.range-picker {
							width: 216px;
							flex-shrink: 0;

							svg {
								color: red;
							}

							&.active {
								width: 308px;
							}
						}
					}
				}
			}

			.basic-region-right {
				display: grid;
				padding-right: 48px;
				grid-auto-flow: column;
				grid-column-gap: 8px;
				direction: rtl; // 用来设置文本、表列水平溢出的方向。 rtl 表示从右到左， ltr 表示从左到右
				.reset {
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: @text03;
					cursor: pointer;
				}

				button {
					margin-left: 16px;
				}
			}
		}

		.checkbox-card {
			width: 100%;
			// position: relative;
			height: calc(100% - 30px - 48px);
			margin-top: 20px;

			.empty {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				height: 100%;
				margin-top: -20px;
			}

			:deep(.ant-checkbox-wrapper-checked) {
				.ant-checkbox-input {
					opacity: 1 !important;
				}
			}

			:deep(.ant-checkbox) .ant-checkbox-input {
				border-color: rgba(217, 217, 219, 1) !important;
			}

			.card-wrap {
				width: 100%;
				height: 100%;
				flex: 1;

				.ant-spin-nested-loading {
					position: absolute;
					top: 12px;
					width: 100%;
					height: 100%;

					.ant-spin-dot {
						margin: 0;
					}
				}

				:deep(.ant-checkbox-inner) {
					border-color: rgba(217, 217, 219, 1) !important;
					background-color: @white !important;
				}

				:deep(.ant-checkbox-checked) {
					.ant-checkbox-inner {
						background: @primary01;
					}
				}

				.card-list {
					display: grid;
					overflow: hidden;
					width: 100%;
					height: 100%;
					padding-right: 32px;
					outline: none;
					grid-template-columns: repeat(5, 1fr);
					grid-template-rows: repeat(2, 1fr);
					grid-column-gap: 8px;
					/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
					grid-row-gap: 8px;

					.lastLine {
						margin-right: 0;
					}

					.card-list-item {
						position: relative;
						min-width: 300px;
						max-width: 355px;
						border: 1px solid transparent;
						border-radius: 8px;
						padding: 8px;
						cursor: pointer;

						.img-wrap {
							width: 100%;
							height: 100%;
							min-height: 160px;
							max-height: 180px;

							> img {
								width: 100%;
								height: 100%;
								object-fit: cover;
								border-radius: 4px;
							}
						}

						.info-box {
							overflow: hidden; /* 隐藏超出容器的内容 */
							margin-top: 8px;
							white-space: nowrap; /* 防止换行 */
							text-overflow: ellipsis; /* 当文字超出容器时显示省略号 */
							color: @text03;

							.flex {
								display: flex;
								align-items: center;
							}

							.flex-between {
								display: flex;
								align-items: center;
								justify-content: space-between;
							}

							.ai-item {
								height: 26px;
								margin-top: 8px;
								font-size: 12px;
								color: @text01;

								.ai-alarm-name {
									margin-right: 4px;
									border-radius: 4px;
									padding: 0 6px;
									font-family: 'Alimama FangYuanTi VF';
									line-height: 20px;
									background: @secondary03;
									text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
								}
							}

							.info-item {
								.left {
									z-index: 1;
									overflow: hidden;
									margin-right: 12px;
									text-overflow: ellipsis;
									flex: 1;

									.info-area {
										font-size: 14px;
										font-weight: 700;
										color: @text01;
									}

									.info-device {
										font-size: 14px;
										font-weight: 400;
										color: @text02;
									}
								}

								.info-time {
									color: @text01;
								}
							}
						}

						.tag {
							margin-left: auto;
							border: 1px solid rgba(0, 0, 0, 0.12);
							border-radius: 4px;
							padding: 0 6px;
							font-size: 12px;
							white-space: nowrap;
							color: #d67900;
							background: rgba(245, 151, 0, 0.12);
						}

						.right-top {
							position: absolute;
							top: 6px;
							right: 8px;

							.ant-checkbox-inner {
								background: #fff !important;
							}
						}

						&.select {
							border: 1px solid #3d7fe9;
							border-radius: 6px;
							background: rgba(26, 111, 243, 0.4);
						}

						&:hover,
						&.checked {
							border: 1px solid #374b79;
							// background-color: #fff;
							// box-shadow:
							// 	0 2px 8px 0 rgba(37, 37, 45, 0.14),
							// 	0 1px 3px 0 rgba(37, 37, 45, 0.14);
							border-radius: 8px;
							background: radial-gradient(66.29% 107.13% at 0% 0%, rgba(38, 62, 131, 0.12) 0%, rgba(217, 217, 217, 0.02) 100%), #0f224e;
							box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.25);

							.right-top {
								display: block !important;
							}

							&::before {
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								content: '';
								// background-color: rgba(0, 0, 0, 0.08);
							}
						}
					}
				}
			}

			.suspend {
				box-sizing: content-box;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 9;
				width: 100%;
				border-top: 1px solid @borderColor01;
				border-bottom-right-radius: 8px;
				border-bottom-left-radius: 8px;
				background: @background02;
				box-shadow:
					0 -1px 3px rgba(37, 37, 45, 0.14),
					0 -2px 8px rgba(37, 37, 45, 0.14);

				.suspend-operate {
					display: flex;
					align-items: center;
					height: 48px;
					border-bottom: 1px solid @borderColor01;
					padding-left: 24px;

					.suspend-operate-select {
						display: flex;
						align-items: center;
						padding-right: 24px;

						:deep(.ant-checkbox) .ant-checkbox-input {
							opacity: 0 !important;
						}

						:deep(.ant-checkbox-wrapper) {
							span {
								color: @text01 !important;
							}
						}

						p {
							font-size: 14px;
							font-weight: 400;
							color: @primary01;
						}

						span {
							display: block;
							width: 1px;
							height: 20px;
							margin: 0 24px;
							background: @borderColor02;
						}
					}

					.export-line {
						display: block;
						width: 1px;
						height: 38px;
						margin: 0 24px;
						background: @borderColor02;
					}

					.suspend-operate-btns {
						display: flex;
						height: 100%;
						padding-left: 24px;
						align-items: center;
						gap: 0 12px;

						.icon-button {
							display: flex;
							align-items: center;
						}
					}
				}

				.suspend-pagination {
					display: flex;
					height: 48px;
					padding: 0 24px;
					color: @text01;
					align-items: center;
					box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.25);

					.pagination {
						margin: 0 auto;
						margin-top: -10px;
					}

					.icon-select-button {
						background-color: rgba(0, 0, 0, 0.1);
					}
				}
			}
		}
	}
}
</style>
